<template>
  <div>
    <div class="materialManageTitle">素材管理</div>
    <el-tabs v-model="activeName">

      <el-tab-pane label="图文消息" name="first">
        <div class="materialManagePictureTextHeader">
          <div class="materialManagePictureTextAll">图文消息（共1条）</div>
          <div class="materialManagePictureTextInput">
            <input placeholder="标题"/>
            <img src="../../static/image/search.png"/>
          </div>
          <div class="materialManagePictureTextBtn">
            <button>新建图文素材</button>
          </div>
        </div>
        <div class="materialManagePictureTextContainer">
          <el-table
            :data="materialPictureTextData"
            stripe
            style="width: 100%">
            <el-table-column
              prop="content"
              label="内容">
            </el-table-column>
            <el-table-column
              prop="date"
              label="更新时间"
              width="180">
            </el-table-column>
            <el-table-column
              prop="address"
              label="操作"
              width="100">
              <template slot-scope="scope">
                <img title="编辑" class="materialManagePictureTextEdit" src="../../static/image/cc-edit.png"/>
                <img title="删除" class="materialManagePictureTextDelete" src="../../static/image/cc-delete.png"/>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="margin-top: 20px;float: right;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[50, 100,150, 200]"
            :page-size="currentPageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-tab-pane>

      <el-tab-pane label="图片" name="second">图片</el-tab-pane>
      <el-tab-pane label="语音" name="third">语音</el-tab-pane>
      <el-tab-pane label="视频" name="fourth">视频</el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import {Tabs, TabPane,Pagination} from 'element-ui';
  import Vue from 'vue';

  Vue.use(Tabs);
  Vue.use(TabPane);
  Vue.use(Pagination);

  export default {
    data() {
      return {
        activeName: 'first',
        materialPictureTextData: [
          {
            material_id: '1',
            content: '确认订单',
            date: '2018-08-13 18:45:23'
          },
          {
            material_id: '2',
            content: '确认订单',
            date: '2018-08-13 18:45:23'
          },
          {
            material_id: '3',
            content: '确认订单',
            date: '2018-08-13 18:45:23'
          }
        ],
        currentPage:1,
        currentPageSize:50,
        total:400
      }
    },
    methods:{
      /**
       * 处理页数变化事件
       * @param val
       */
      handleSizeChange(val){
        this.currentPageSize=val;
      },
      /**
       * 处理页码变化事件
       * @param val
       */
      handleCurrentChange(val){
        this.currentPage=val;
      }
    }
  }
</script>
<style scoped>
  .materialManageTitle {
    font-size: 20px;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .materialManagePictureTextHeader {
    display: flex;
    overflow: hidden;
    margin-top: 5px;
  }

  .materialManagePictureTextAll {
    font-size: 20px;
    height: 34px;
    line-height: 34px;
    width: calc(100% - 432px);
  }

  .materialManagePictureTextInput {
    position: relative;
  }

  .materialManagePictureTextInput input {
    width: 240px;
    height: 30px;
    border: 1px solid #ddd;
    padding-left: 10px;
    padding-right: 30px;
    color: #999;
  }

  .materialManagePictureTextInput img {
    position: absolute;
    width: 24px;
    height: 24px;
    z-index: 999;
    top: 5px;
    right: 8px;
    cursor: pointer;
  }

  .materialManagePictureTextBtn {
    width: 150px;
    padding-left: 10px;
  }

  .materialManagePictureTextBtn button {
    width: 100%;
    height: 34px;
    background: #34A123;
    color: #fff;
    border: 1px solid #34A123;;
  }

  .materialManagePictureTextContainer {
    margin-top: 10px;
  }

  .materialManagePictureTextEdit {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }

  .materialManagePictureTextDelete {
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-left: 5px;
  }
</style>
